<template>
	<view class="container">
		<!-- 设置 -->
		<view class="set-up">
			<view class="flex">
				<view class="userImage">
					<image 
					@error="ErrSrc"
					class="userIma"
					:src="user.avatar" mode="aspectFill"/>
				</view>
				<view class="userName">
					<view style="font-size: 32rpx;">
					{{user.username|| ''}}
					<span v-if="user.name">({{user.name||''}})</span>
				</view>
					<view style="font-size: 24rpx;opacity: 0.5;">工号: {{user.id || ''}}</view>
				</view>
			</view>
			<view>
				<!-- <image @click="handeleSetup" style="width: 44rpx;height: 44rpx;" src="/static/work/ty_sz.png" mode=""></image> -->
			</view>
		</view>
		<!-- 统计 -->
		<view class="statistics">
			<view class="tic">
				<view style="font-size: 32rpx;">0</view>
				<view style="font-size: 24rpx;">商品总数</view>
			</view>
			<view class="tic">
				<view style="font-size: 32rpx;">0</view>
				<view style="font-size: 24rpx;">库位总数</view>
			</view>
			<view class="tic">
				<view style="font-size: 32rpx;">0</view>
				<view style="font-size: 24rpx;">过期预警</view>
			</view>
			<view class="tic">
				<view style="font-size: 32rpx;">0</view>
				<view style="font-size: 24rpx;">库存预警</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="list-cs">
			<view class="block" @click="show = true">
				<view class="blockLeft">
					<image style="width: 34rpx;height: 34rpx;" src="/static/work/wd_listmenu01.png" mode=""/>
					<view style="margin-left: 20rpx;">待我审批</view>
				</view>
				<view class="blockRight">
					<view class="rights">0</view>
					<image style="width: 20rpx;height: 20rpx;margin-left: 15rpx;" src="/static/work/ty_mid_arrow.png" mode=""></image>
				</view>
			</view>
			<view class="block" @click="show = true">
				<view class="blockLeft">
					<image style="width: 34rpx;height: 34rpx;" src="/static/work/wd_listmenu02.png" mode=""/>
					<view style="margin-left: 20rpx;">待入库</view>
				</view>
				<view class="blockRight">
					<view class="rights">0</view>
					<image style="width: 20rpx;height: 20rpx;margin-left: 15rpx;" src="/static/work/ty_mid_arrow.png" mode=""></image>
				</view>
			</view>
			<view class="block" @click="show = true">
				<view class="blockLeft">
					<image style="width: 34rpx;height: 34rpx;" src="/static/work/wd_listmenu03.png" mode=""/>
					<view style="margin-left: 20rpx;">待出库</view>
				</view>
				<view class="blockRight">
					<view class="rights">0</view>
					<image style="width: 20rpx;height: 20rpx;margin-left: 15rpx;" src="/static/work/ty_mid_arrow.png" mode=""></image>
				</view>
			</view>
			<view class="block" @click="show = true">
				<view class="blockLeft">
					<image style="width: 34rpx;height: 34rpx;" src="/static/work/wd_listmenu04.png" mode=""/>
					<view style="margin-left: 20rpx;">待生产</view>
				</view>
				<view class="blockRight">
					<view class="rights">0</view>
					<image style="width: 20rpx;height: 20rpx;margin-left: 15rpx;" src="/static/work/ty_mid_arrow.png" mode=""></image>
				</view>
			</view>
			<view class="block" @click="show = true">
				<view class="blockLeft">
					<image style="width: 34rpx;height: 34rpx;" src="/static/work/wd_listmenu05.png" mode=""/>
					<view style="margin-left: 20rpx;">权限管理</view>
				</view>
				<view class="blockRight">
					<image style="width: 20rpx;height: 20rpx;margin-left: 15rpx;" src="/static/work/ty_mid_arrow.png" mode=""></image>
				</view>
			</view>
			<view class="block" @click="show = true">
				<view class="blockLeft">
					<image style="width: 34rpx;height: 34rpx;" src="/static/work/wd_listmenu06.png" mode=""/>
					<view style="margin-left: 20rpx;">操作日志</view>
				</view>
				<view class="blockRight">
					<image style="width: 20rpx;height: 20rpx;margin-left: 15rpx;" src="/static/work/ty_mid_arrow.png" mode=""></image>
				</view>
			</view>
			<view class="block" @click="show = true">
				<view class="blockLeft">
					<image style="width: 34rpx;height: 34rpx;" src="/static/work/wd_listmenu07.png" mode=""/>
					<view style="margin-left: 20rpx;">意见反馈</view>
				</view>
				<view class="blockRight">
					<image style="width: 20rpx;height: 20rpx;margin-left: 15rpx;" src="/static/work/ty_mid_arrow.png" mode=""></image>
				</view>
			</view>
			<view class="block" @click="show = true">
				<view class="blockLeft">
					<image style="width: 34rpx;height: 34rpx;" src="/static/work/wd_listmenu08.png" mode=""/>
					<view style="margin-left: 20rpx;">联系客服</view>
				</view>
				<view class="blockRight">
					<image style="width: 20rpx;height: 20rpx;margin-left: 15rpx;" src="/static/work/ty_mid_arrow.png" mode=""></image>
				</view>
			</view>
			
		
		</view>
		<view class="header"></view>
		<u-popup :show="show" mode="center"  @close="show=false"  bgColor="transparent">
		        <view>
		            <image class="developing" src="/static/developing.png" mode="" @click="show = false"></image>
		        </view>
		</u-popup>
	</view>
</template>

<script>
	import {getUserInfo} from '@/api/person.js'
	export default {
		data() {
			return {
				show:false,
				user:{
					avatar:'',
					username:'',
					id:'',
					name:''
				},//用户信息
				title: 'Hello',
				errSrc:"/static/user.png" // 加载失败的占位图片
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			async getData(){
				let res = await getUserInfo()
				this.user = res.data
				this.user.name = res.data.roles[0].name
			},
			handeleNFC(){
				uni.navigateTo({
					url:'/pages/work/common/nfc'
				})
			},
			handeleSetup(){
				uni.navigateTo({
					url:'/pages/person/setup/setup'
				})
			},
			handeleRFID(){
				uni.navigateTo({
					url:'/pages/work/common/RFID'
				})
			},
			// 测试打印机
			handlePrint(){
				uni.navigateTo({
					url:'/pages/tabbar/person/print'
				})
			},
			ErrSrc(){
				console.log('图片加载失败');
				this.user.avatar = this.errSrc
			}
		}
	}
</script>

<style scoped>
	.developing{
		width: 490rpx;
		height: 600rpx;
	}
	.userIma{
		width: 100%;
		height: 100%;
		border-radius: 100%;
		margin-top: -5rpx;
	}
	.userImage{
		width: 105rpx;
		height: 105rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 105rpx;
		padding: 5rpx;
		box-sizing: border-box;
	}
	.header{
		width: 750rpx;
		height: 642rpx;
		background: linear-gradient(0deg, #177A77, #4B9C6D);
		border-radius: 0rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.rights{
		font-size: 26rpx;
		color: #177A77 ;
		border-bottom: 1rpx solid #177A77;
		margin-top: -5rpx;
	}
	.blockRight{
		height: 100rpx;
		display: flex;
		align-items: center;
	}
	.block{
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #d3d3d3;
		padding: 0 33rpx;
		box-sizing: border-box;
	}
	.blockLeft{
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}
	.list-cs{
		width: 750rpx;
		min-height: 832rpx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 30rpx 0 0 0;
		box-sizing: border-box;
		z-index: 2;
	}
	.tic{
		width: 100rpx;
		height: 79rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		color: #FFFFFF;
	}
	.statistics{
		margin: 70rpx 0 55rpx 0;
		width: 750rpx;
		padding: 0 64rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box; 
		z-index: 2;
	}
	.userName{
		width: 70%;
		height: 70rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #FFFFFF;
		margin-left: 28rpx;
	}
	
	.flex{
		width: 90%;
		display: flex;
		align-items: center;
	}
	.set-up{
		width: 750rpx;
		height: 103rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 64rpx;
		box-sizing: border-box;
		margin-top: 156rpx;
		z-index: 2;
	}
	.container{
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		
		background-color: #FFFFFF;
	}
	
</style>